i /*
  1、webpack 认识
    1.1 理解
      前端模块化管理和打包工具，基于 nodejs 的。

    1.2 自动化工程
      grunt
      gulp
      webpack
      parcel
      vite

    1.3 安装
      >> 全局安装：(4.x)
        npm i -g webpack-cli

        # 打包 - 将 app.js 打包到 当前目录下的 build.js 中
        webpack app.js build.js

    1.4 本地安装（在当前项目下安装 - 不同的项目可以选择不同的 webpack 版本）
      # 生产环境依赖
      npm i webpack
      # or
      npm i webpack --save
      # or
      npm i webpack -S

      # 开发环境依赖
      npm i webpack --save-dev
      npm i webpack -D

      # 安装指定版本
      npm i webpack@4

  2、React 开发环境搭建
    2.1 项目准备
      >> 创建项目
        mkdir 项目名 && cd 项目名

      >> package.json 初始化
        npm init(npm init -y)

      >> git 初始化

      >> 安装相关依赖
        npm i react

    2.2 webpack 基本配置 - 根目录下创建 webpack.config.js
      2.2.1 输入 -- 项目入口设置
        module.exports = {
          entry: __dirname + "/src/app.js", // 项目入口文件
        }

      2.2.2 输出 -- 项目出口
        output: {
          path // 输出后文件夹路径
          publicPath // 静态资源路径，一般不配置，只要部署在根路径下，都不需要设置
          filename // 打包后文件名
          // filename: [name].[hash].js 自动生成有hash值的文件
        }

  3、其他配置
    3.1 module
      主要用于定义各个模块的处理逻辑，使用 loaders 这个加载器进行处理。

      3.1.1 React 环境
        npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react
        npm install -D @babel/plugin-proposal-class-properties
        npm i react react-dom

      3.1.2 css 处理
        # sass
        npm i css-loader style-loader -D
        npm i sass-loader node-sass -D

        * css-loader 解析 css 文件路径
        * style-loader 将 css 解析到 html 的 style 标签中
        * 从右往左依次写 css-loader， style-loader

    3.2 resolve
      路径简写，文件后缀简写

    3.3 devtool

    3.4 mode

    3.5 devServer
      启动本地服务器，也在这里设置本地反向代理，解决开发环境下跨域的问题。

    3.6 piugins
      3.6.1 html-webpack-plugin
        npm i html-webpack-plugin -D

      3.6.2 clean-webpack-plugin
        每次打包前自动删除输出目录中的文件

        npm i -D clean-webpack-plugin


  4、class
    4.1 面向对象
      >> 概念
        类 - 相同属性的一类事物的统称
        对象（实例） - 具体化的一个事物。

    4.2 class
      >> constructor
        每一个 类必须有 constructor，否则会自动创建一个空的 constructor。

      >> extends
        class 子类 extends 父类 {
          constructor() {
            super() // 必须先调用，super 指向父类构造函数的
            this.
          }
        }

      >> 静态属性、方法
        只需要在属性或者方法前面加上 static 关键字。

      >> 属性劫持
        使用 set 和 get 关键词对属性的设置和获取进行拦截。


  5、React
    5.1 认识
      2013年开源

      组件化
      单向数据流
      虚拟 DOM

      react
      ssr(next.js)
      react native
      react-vr
      reactxp
      gatsby

      antd

  6、JSX 语法
    6.1 概念
      允许在 JS 中插入 HTML 代码，是属于 JS 的语法扩展。

      // 使用 JSX
      const h = <h1 className="title">标题</h1>

      // 不使用 JSX
      const h = React.createElement('h1', {
        className: 'title'
      }, '标题')

    6.2 语法规范
      * （低版本） React 顶层只支持一个根标签。
      * 在标签之间通过 {} 插入 JS 代码，在大括号内放置任何有效的 JS 表达式；
      * 替换关键字，如 class 写为 classNmae，for 属性写为 htmlFor；
      * 标签上所有的属性和方法使用小驼峰，如 onclick 改为 onClick；
      * 标签必须闭合，如 <img > 改为 <img></img> 或者 <img />；
      * 标签中注释需要写在 {} 之间；
      * 当变量是 Number、String、Array 时，可以直接显示；
      
    6.3 引入框架
      import React from "react"
      import ReactDOM from "react-dom"

      import Home from "./views/Home" // 组件

      ReactDOM.render(<Home />, document.getElementById("app"))

    6.4 语法
      >> 变量插入
        const p = <p>周四了</p>

      >> 函数调用
        {函数名()}

      >> 标签属性绑定
        <img src={src} />

      >> 条件渲染
        if(条件) {
          return dom
        }

        {条件 ? dom1 : dom2}

        {count > 0 && <p></p>}

      >> 列表渲染
        利用数组的 map 方法完成列表渲染。
*/
